<template>
  <el-form-item ref="item" :class="getClz()" :label="opt.text" :prop="opt.name" v-if="!opt.hide"  v-bind="opt.itemProps">
    <treeselect
      ref="tree"
      v-model="data[opt.name]"
      :options="[opt.hasNullOption,...opt.options]"
      :show-count="true"
      :clearable="opt.prop.clearable"
      :placeholder="opt.props.disabled?'':opt.placeholder"
      :disableBranchNodes="opt.disableBranchNodes"
      openOnClick
      appendToBody
      branchNodesFirst
      @change="setValueMap"
    />
  </el-form-item>
</template>

<script>
  import extend from '../extend';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  let Log = ()=>{};

  export default {
    name: "FormSelect",
    mixins:[extend],
    components: {Treeselect},
    dicts:[],
    data(){
      return {
        opt: {
          name:'',
          text:'',
          prop:'',
          itemProps:{},
          props:{
            disabled:false,
            filterable:true,
            clearable:true
          },
          hide:false,
          placeholder:'',
          hasNull:false,
          disableBranchNodes:true,
          //sortValueBy:'INDEX',
          hasNullOption:null,
          options:[],
          optionsLabel:'label',
          optionsValue:'value',
          formatter:(val)=>{
              if(this.opt.props.multiple){
                return val || [];
              }else{
                return val + '';
              }
          }
        }
      }
    },
    mounted(){
      this.initOptions();
      this.onChange = this.opt.onChange||Log;
      this.onOptions = this.opt.onOptions||Log;
    },
    methods:{
      onClear(){
        this.setValue("");
      },
      setValue(val = ''){
        this.data[this.opt.name] = this.opt.formatter(val);
        this.$refs.item.clearValidate()
      },
      setValueMap(val){
        this.onChange(this.data,this.column);
      }
    }
  }
</script>
<style lang="scss">
  .vue-treeselect{
    color: #212020;

    &.vue-treeselect__portal-target{
      z-index: 9999 !important;
    }

    .vue-treeselect__option:not(.vue-treeselect__option--selected){
      label{
        font-weight:400;
      }
    }

    .vue-treeselect__control{
      width: inherit;
    }

    .vue-treeselect__x-container{
      position: absolute;
      top: 14px;
      right: 12px;
    }
  }

  .el-form-item--mini{
    .vue-treeselect__control{
      height:32px;
    }
  }
</style>
